<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{height:100%;margin: 0;padding:0;overflow: hidden;}
    .cont{width: 90%;height: 90%;background: #000;margin:  10px auto;position: relative;}
    .fire{width:10px;height:20px;position: absolute;}
    .s_fire{width:10px;height:10px;position: absolute;border-radius: 50%;}
  </style>
</head>
<body>
  <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>

  // 获取烟花场景【属性】
  // 创建烟花元素【属性】
  // 设置基础样式和位置【方法】
  // 插入到指定容器【方法】
  // 开始运动【方法】
  // 运动到终点后，删除【方法】

  class Fire{
    constructor( { type, now, target, cont, className } ){
      // 接收参数
      this.type = type;
      this.className = className;
      this.now = now;
      this.target = target;
      this.cont = cont;
      // 创建元素
      this.ele = document.createElement("div");
      // 设置基本样式
      this.init();
    }
    init(){
      this.ele.className = this.className;
      this.ele.style.left = this.now.left + "px";
      this.ele.style.top = this.now.top + "px";
      this.ele.style.background = randomRGB();
      this.cont.appendChild(this.ele);
      // 开始运动
      this.move();
    }
    move(){
      // 调用运动函数
      // 传入运动元素，传入运动目标
      move(this.ele, this.target, ()=>{
        // 当运动结束后，删除当前烟花元素
        this.ele.remove();
        // 根据当前烟花元素的类型，决定是否继续创建小烟花
        // 0表示主体烟花，需要创建
        if(this.type === 0){
          // 创建多个小烟花
          for(let i=0;i<random(10,20);i++){
            // 创建小烟花，type为1
            // 小烟花的初始位置，就是大烟花的运动目标位置
            // 小烟花的目标位置为随机位置
            new Fire({
              type: 1,
              now: this.target,
              target: {
                left: random(0, this.cont.offsetWidth - this.ele.offsetWidth),
                top: random(0, this.cont.offsetHeight - this.ele.offsetHeight)
              },
              cont: this.cont,
              className: "s_fire"
            });
          }
        }
      });
    }
  }

  const cont = document.querySelector(".cont")
  cont.onclick = function(eve){
    const e = eve || window.event;
    // 创建主体烟花，type为0
      // type表示烟花类型：0为主体，1为小烟花
      // now表示元素的当前位置
      // target表示元素的运动目标位置
      // cont表示烟花所在的容器
      // className表示当前烟花元素的基本样式
    new Fire({
      type: 0,
      now: {
        left: e.offsetX,
        top: cont.offsetHeight
      },
      target: {
        left: e.offsetX,
        top: e.offsetY
      },
      cont,
      className: "fire"
    })
  }

  function random(a,b){
    return Math.round(Math.random()*(a-b)+b);
  }

  function randomRGB(){
    return `rgb(${random(150,255)},${random(150,255)},${random(150,255)})`;
  }


</script>
</html>